<template>
  <div>
    <el-card v-loading="loading" element-loading-background="rgba(255, 255, 255, 1)">
      <el-page-header @back="router.back()" style="margin-bottom: 20px" title="成绩管理">
        <template #content>
          <span class="text-large font-600 mr-3">录入补考</span>
        </template>
      </el-page-header>

      <el-row>
        <el-col :span="4">课程编号：{{ courseData.courseid }}</el-col>
        <el-col :span="4">课程名称：{{ courseData.coursename }}</el-col>
        <el-col :span="4">学分：{{ courseData.credit }}</el-col>
        <el-col :span="4">成绩类型：{{ courseData.type === 1 ? '百分制' : '等级划分制' }}</el-col>
        <el-col :span="4">专业名称：{{ courseData.major }}</el-col>
        <el-col :span="4">任课教师：{{ courseData.name }}</el-col>
      </el-row>

      <el-form v-if="tableData.length">
        <el-table :data="tableData" style="width: 100%" stripe>
          <el-table-column prop="classes" label="班级" />
          <el-table-column prop="username" label="学号" />
          <el-table-column prop="name" label="姓名" />
          <el-table-column label="平时成绩">
            <template #default="scope">
              <el-form-item style="margin: auto" v-if="num1">
                {{ scope.row.daily }}
              </el-form-item>
              <el-form-item style="margin: auto" v-else> — </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="实验成绩">
            <template #default="scope">
              <el-form-item style="margin: auto" v-if="num2">
                {{ scope.row.exp }}
              </el-form-item>
              <el-form-item style="margin: auto" v-else> — </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="期中成绩">
            <template #default="scope">
              <el-form-item style="margin: auto" v-if="num3">
                {{ scope.row.mid }}
              </el-form-item>
              <el-form-item style="margin: auto" v-else> — </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="期末成绩">
            <template #default="scope">
              <el-form-item style="margin: auto">
                {{ scope.row.final }}
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="补考成绩">
            <template #default="scope">
              <el-form-item style="margin: auto" v-if="courseData.type === 1">
                <el-input v-model.number="scope.row.reexam" placeholder="Please input" oninput="if(value > 60) value = 60; if(value < 0 || value == '' || value == null) value = 0;" :maxlength="3" :minlength="1" />
              </el-form-item>
              <el-form-item style="margin: auto" v-else-if="courseData.type === 2">
                <el-select v-model.number="scope.row.reexam" class="m-2" placeholder="Select">
                  <el-option v-for="item in ScoreOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="总评">
            <template #default="scope">
              <div style="margin: auto" v-if="courseData.type === 1">
                {{ scope.row.reexam }}
              </div>
              <div style="margin: auto" v-else>
                {{ level(scope.row) }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="绩点">
            <template #default="scope">
              <div style="margin: auto; color: red; background-color: yellow" v-if="scope.row.reexam < 60">0</div>
              <div style="margin: auto" v-else>1.00</div>
            </template>
          </el-table-column>
        </el-table>

        <el-form-item style="margin-top: 20px">
          <el-button type="primary" @click="handleSummit()">上传</el-button>
        </el-form-item>
      </el-form>

      <h1 style="text-align: center; font-size: 64px; color: blue" v-else>所有学生已通过考试！<br />无需上传补考成绩！</h1>
    </el-card>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Histogram, PieChart, TrendCharts } from '@element-plus/icons-vue'
import axios from 'axios'
import * as echarts from 'echarts'
const router = useRouter()
const route = useRoute()
const courseData = ref({})
const tableData = ref([])
const loading = ref(true)
const num1 = ref(0) //平时成绩
const num2 = ref(0) //实验成绩
const num3 = ref(0) //期中成绩
const num4 = ref(0) //期末成绩
const ScoreOptions = [
  { label: '及格', value: 60 },
  { label: '不及格', value: 0 }
]
const level = ({ reexam }) => {
  switch (reexam) {
    case 60:
      return '及格'
      break
    case 0:
      return '不及格'
      break
  }
}
onMounted(async () => {
  await getCourseData()
  await getTableData()
  handleSetRatio()
})
const getCourseData = async () => {
  const res1 = await axios.get(`/api/course/list/${route.params.id}`)
  const res2 = await axios.get('/api/user/getteacherlist')
  // 将教师工号改为名字
  res1.data.data.forEach((item) => {
    res2.data.data.forEach((i) => {
      if (item['courseteacher'] === i['username']) {
        item['name'] = i['name']
      }
    })
  })
  courseData.value = res1.data.data[0]
}
const getTableData = async () => {
  const res1 = await axios.get(`/api/score/nopasslist/${courseData.value.courseid}`)
  const res2 = await axios.get(`/api/student/scorelist/${courseData.value.major}`)
  const res3 = await axios.get('/api/user/getstudentlist')
  // 附上学生名字
  res2.data.data.forEach((item) => {
    res3.data.data.forEach((i) => {
      if (item['username'] === i['username']) {
        item['name'] = i['name']
      }
    })
  })
  // 附上成绩信息
  res1.data.data.forEach((item) => {
    res2.data.data.forEach((i) => {
      if (item['username'] === i['username']) {
        Object.assign(item, i)
      }
    })
  })
  tableData.value = res1.data.data
  loading.value = false
}
const handleSetRatio = () => {
  if (courseData.value.ratio) {
    let arr = courseData.value.ratio.split(',')
    num1.value = Number(arr[0])
    num2.value = Number(arr[1])
    num3.value = Number(arr[2])
    num4.value = Number(arr[3])
  }
}
const handleSummit = () => {
  tableData.value.forEach(async (item) => {
    await axios.put(`/api/score/list/${courseData.value.courseid}`, item)
    // console.log(item)
  })
  ElMessage.success('发布成功！')
  router.push(`/score-manage/addscore`)
}
</script>

<style lang="scss" scoped>
::v-deep .el-table .el-table__cell {
  text-align: center;
}
::v-deep .el-form-item__content {
  justify-content: center;
}
</style>
